<template>
  <div v-dialogdrag="dialogs.width">
    <!--添加模块的外壳-->
    <el-dialog
      :title="'添加模块'"
      v-model="dialogs.visible"
      :modal="true"
      :width="dialogs.width"
      style="height:500px"
    >
        <el-steps :active="active" finish-status="success">
          <el-step title="添加菜单"></el-step>
          <el-step title="添加表、字段"></el-step>
          <el-step title="创建模块"></el-step>
        </el-steps>
        <modules
          v-show="active === 1"
          :moduleInfo="moduleInfo"
        />
        <tables
          v-show="active === 2"
          :moduleInfo="moduleInfo"
        />
        <create-module
          v-show="active === 3"
          :moduleInfo="moduleInfo"
        />
        <hr>
        <el-button style="margin-top: 12px;" @click="next1(-1)">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="next1(1)">下一步</el-button>
        <el-button style="margin-top: 12px;" @click="next1(3)">完成</el-button>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable import/no-absolute-path */
import { ref, reactive } from 'vue'

// 添加导航的组件
import modules from './module.vue'
// 添加表的组件
import tables from '../table/table.vue'
// 添加表的组件
import createModule from './moduleCreate.vue'

export default {
  name: 'plat-meta-table-colmun'
}

const moduleManage = () => {
  // 定义模块、表和字段的信息
  const moduleInfo = reactive({
    moduleModal: {},
    tableModal: {},
    columnModal: []
  })

  // 模块的处理，把模块存入 webSQL、indexedDB
  // 表的处理，把表存入 webSQL、indexedDB
  // 模块详细的处理，列表、表单等信息。

  return {
    moduleInfo
  }
}
</script>

<script setup>

const props = defineProps({
  dialog: Object
})

const dialogs = props.dialog

/**
 * 导入数据生成表和字段的信息
 * 可以修改字段类型等信息
 * 往 webSQL 的 meta 里面添加表和字段
 * 如果设置模块ID的话，往 indexedDB 的 meta 里面添加 模块信息
 */

const active = ref(1)
const next1 = (num) => {
  active.value += num
  if (active.value < 1) active.value = 1
  if (active.value > 3) active.value = 3
}

// 模块和表的管理类
const {
  moduleInfo
} = moduleManage()

</script>
